<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个聊天示例</title>
		<link rel="stylesheet" href="../css/chat.css"/>
		<style>
			.tab {
			  display: inline-block;
			  padding: 10px;
			  background-color: #ccc;
			  cursor: pointer;
			}
			
			.tab-content .content {
			  display: none;
			}
			
			.tab-content .content.active {
			  display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<a>这是一个聊天示例页面</a>
			<a>仿写的是微信，会尽可能的仿写，会尽可能的实现</a>
			<a>chat ~</a>
			<button id="openpopup">进入按钮</button>
		</div>
		
		<div class="chat-box" id="chat-box">
			<div class="main">
				<div class="first">
					<div class="item">
						<div class="item-content">
							<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="28px" height="28px"><path d="M 25 4.0625 C 12.414063 4.0625 2.0625 12.925781 2.0625 24 C 2.0625 30.425781 5.625 36.09375 11 39.71875 C 10.992188 39.933594 11 40.265625 10.71875 41.3125 C 10.371094 42.605469 9.683594 44.4375 8.25 46.46875 L 7.21875 47.90625 L 9 47.9375 C 15.175781 47.964844 18.753906 43.90625 19.3125 43.25 C 21.136719 43.65625 23.035156 43.9375 25 43.9375 C 37.582031 43.9375 47.9375 35.074219 47.9375 24 C 47.9375 12.925781 37.582031 4.0625 25 4.0625 Z M 25 5.9375 C 36.714844 5.9375 46.0625 14.089844 46.0625 24 C 46.0625 33.910156 36.714844 42.0625 25 42.0625 C 22.996094 42.0625 21.050781 41.820313 19.21875 41.375 L 18.65625 41.25 L 18.28125 41.71875 C 18.28125 41.71875 15.390625 44.976563 10.78125 45.75 C 11.613281 44.257813 12.246094 42.871094 12.53125 41.8125 C 12.929688 40.332031 12.9375 39.3125 12.9375 39.3125 L 12.9375 38.8125 L 12.5 38.53125 C 7.273438 35.21875 3.9375 29.941406 3.9375 24 C 3.9375 14.089844 13.28125 5.9375 25 5.9375 Z"/></svg>
						</div>
					</div>
				
					<div class="item">
						<div class="item-content">
							<img width="30px" height="30px" src="">
						</div>
					</div>
				</div>
				<div class="two">
					<div class="two-item">
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称
								</div>
								<div class="content">
									这是消息内容
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称3333
								</div>
								<div class="content">
									这是消息内容33333
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称44444
								</div>
								<div class="content">
									这是消息内容44444
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称555555
								</div>
								<div class="content">
									这是消息内容5555
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称666666
								</div>
								<div class="content">
									这是消息内容666666
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称77777
								</div>
								<div class="content">
									这是消息内容7777
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称88888
								</div>
								<div class="content">
									这是消息内容88888
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称9999
								</div>
								<div class="content">
									这是消息内容9999
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
						<div class="item-message">
							<div class="image">
								<img src="../img/下载.png"/>
							</div>
							<div>
								<div class="nicheng">
									这是昵称222
								</div>
								<div class="content">
									这是消息内容222
								</div>
							</div>
						</div>
					</div>
					<div class="two-item">
						好友列表
					</div>
				</div>
				<div class="three">
					<div class="three-main">
						<div class="header">
							
						</div>
						<div class="three-content">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		<script>
			
			
			
			const nodes_bound=document.querySelectorAll('.two-item');	
			const nodes = document.querySelectorAll('.item');
			
			
			nodes.forEach((node, index) => {
				 node.addEventListener('click', () => {
				   let num=index;
				   nodes.forEach(n => n.classList.remove('item-background'));
				   node.classList.add('item-background');
				   setBoundItem(num);
				 });
			});
			function setBoundItem(num){
				nodes_bound.forEach((node, index) => {
					if(index==num){
						node.style.display='block';
					}else{
						node.style.display='none';
					}
				})
			}
			
			nodes[0].click();
			
			
			document.getElementById('openpopup').addEventListener('click',(event)=>{
				document.getElementById('chat-box').style.display='block';
			})
			
			// 获取可拖动的元素
			const draggableElement = document.getElementById('chat-box');
			
			// 用于记录鼠标按下时的初始位置
			let startMouseX = 0;
			let startMouseY = 0;
			
			// 用于记录元素初始位置
			let startElementX = 0;
			let startElementY = 0;
			
			// 当鼠标按下时触发的事件处理函数
			const handleMouseDown = (event) => {
			  // 记录鼠标按下时的初始位置和元素初始位置
			  startMouseX = event.clientX;
			  startMouseY = event.clientY;
			  startElementX = draggableElement.offsetLeft;
			  startElementY = draggableElement.offsetTop;
			
			  // 添加鼠标移动和鼠标释放事件的监听器
			  document.addEventListener('mousemove', handleMouseMove);
			  document.addEventListener('mouseup', handleMouseUp);
			};
			
			// 当鼠标移动时触发的事件处理函数
			const handleMouseMove = (event) => {
			  // 计算鼠标移动的距离
			  const moveX = event.clientX - startMouseX;
			  const moveY = event.clientY - startMouseY;
			
			  // 计算元素的新位置
			  const newElementX = startElementX + moveX;
			  const newElementY = startElementY + moveY;
			
			  // 更新元素的位置
			  draggableElement.style.left = newElementX + 'px';
			  draggableElement.style.top = newElementY + 'px';
			};
			
			// 当鼠标释放时触发的事件处理函数
			const handleMouseUp = () => {
			  // 移除鼠标移动和鼠标释放事件的监听器
			  document.removeEventListener('mousemove', handleMouseMove);
			  document.removeEventListener('mouseup', handleMouseUp);
			};
			
			// 为元素添加鼠标按下事件的监听器
			draggableElement.addEventListener('mousedown', handleMouseDown);
			
			
		</script>
	</body>
</html>